<script setup>
import { useRoute } from 'vue-router'
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const route = useRoute()
const title = route.meta.title
const selName = ref('')
const tableData = [
  {
    course: 'Java程序设计',
    created_at: '2016-05-03',
    zt: true
  },
  {
    course: 'C++程序设计',
    created_at: '2016-05-03',
    zt: false
  },
  {
    course: 'Python程序设计',
    created_at: '2016-05-03',
    zt: true
  },
  {
    course: 'MongoDB数据库技术',
    created_at: '2016-05-03',
    zt: true
  }
]
const openMessage = (type) => {
  switch (type) {
    case '1':
      ElMessage({
        message: '编辑',
        type: 'success'
      })
      break
    case '2':
      ElMessage({
        message: '资源管理',
        type: 'success'
      })
      break
    case '3':
      ElMessage({
        message: '查看',
        type: 'success'
      })
      break
    case '4':
      ElMessage({
        message: '删除',
        type: 'error'
      })
      break
    default:
      break
  }
}
const ztChange = (row) => {
  if (row.zt) {
    ElMessage({
      message: `${row.course}的状态已启用`,
      type: 'success'
    })
  } else {
    ElMessage({
      message: `${row.course}的状态已禁用`,
      type: 'error'
    })
  }
}
const currentChange = (row) => {
  selName.value = row.course
}
</script>

<template>
  <el-card>
    <template #header>
      <p style="margin: 0;text-align: left">{{ title }}</p>
    </template>
    <div style="min-height: 300px">
      <el-table
        @current-change="currentChange"
        :data="tableData">
        <el-table-column type="index" label="序号" />
        <el-table-column prop="course" label="课程名称" />
        <el-table-column prop="created_at" label="创建时间" />
        <el-table-column prop="zt" label="状态">
          <template #default="scope">
            <el-switch v-model="scope.row.zt" @change="ztChange(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="text" @click="openMessage('1')">编辑</el-button>
            <el-button type="text" @click="openMessage('2')">资源管理</el-button>
            <el-button type="text" @click="openMessage('3')">查看</el-button>
            <el-button type="text" @click="openMessage('4')">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <p style="text-align: center" v-if="selName !== ''">当前选中的课程名称：{{ selName }}</p>
    </div>
  </el-card>
</template>

<style scoped>

</style>
